<!DOCTYPE HTML>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>User Collection statistic</title>
	<script  type="text/javascript" src="Scripts/ServletAddress.js"></script>
	<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
	var chart;
	var capacity=10;
	//应该是数组的问题	
	var HIDs=new Array(capacity);
	var vals=new Array(capacity);
	var len;		
	
    $(document).ready(function() { 		
	//获取数据部分
	 $.getJSON(ServletAddress+getTraceAdd+"RankType=UserCollectionRank",function(result){	
			
			var lastIndex;
			var firstIndex;
			var totalSize;				
			totalSize=result.length;
			//alert(result);
			if(result.length<=capacity)
			{
				len=result.length;
			}
			else
			{
				len=capacity;
			}
			lastIndex=totalSize-1;
			firstIndex=totalSize-len-1;
			var index=0;
			for(var i=lastIndex;i>firstIndex;i--)
			{			
				HIDs[index]=result[i].HID;				
				vals[index]=result[i].mark;				
				index++;
			}
								
			//绘制表格部分
			var colors = Highcharts.getOptions().colors,
            //categories = [HIDs[0], 'Firefox', 'Chrome', 'Safari', 'Opera'],
			categories = HIDs,
            name = '房屋编号',
            data = [{
                    y: vals[0],
                    color: colors[0]                   
                }, {
                    y: vals[1],
                    color: colors[1]
                }, {
                    y: vals[2],
                    color: colors[2]
                }, {
                    y: vals[3],
                    color: colors[3]
                }, {
                    y: vals[4],
                    color: colors[4]
                }, {
                    y: vals[5],
                    color: colors[5]
                },{
                    y: vals[6],
                    color: colors[6]                   
                },{
                    y: vals[7],
                    color: colors[7]                   
                },{
                    y: vals[8],
                    color: colors[8]                   
                },{
                    y: vals[9],
                    color: colors[9]                   
                }];
    
        function setChart(name, categories, data, color) {
            chart.xAxis[0].setCategories(categories);
            chart.series[0].remove();
            chart.addSeries({
                name: name,
                data: data,
                color: color || 'white'
            });
        }
    
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: '用户收藏统计图表'
            },
           
            xAxis: {
                categories: categories
            },
			//Y轴
            yAxis: {
                title: {
                    text: '收藏人数'
                }
            },
            plotOptions: {
                column: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
							//getStatistic();
                                //alert ('房屋号: '+ this.category +', 收藏人数: '+ this.y);
								//showInTable(this.category);	 
								window.parent.getOpener(this.category);
								///alert("dd");
                            }
                        }
                    },
					//显示柱状图的人数
                    dataLabels: {
                        enabled: true,
                        color: colors[0],
                        style: {
                            fontWeight: 'bold'
                        },
                        formatter: function() {
                            return this.y +'人';
                        }
                    }
                }
            },
            tooltip: {
                formatter: function() {
                    var point = this.point,
                        //s = this.x +':<b>'+ this.y +'人浏览过它</b><br/>';  
						s = '有'+ this.y +'个用户将它放入自己的收藏！</b><br/>点击查看详细房屋信息';  						
                    return s;
                }
            },
            series: [{
                name: name,
                data: data,
                color: 'white'
            }],
            exporting: {
                enabled: false
            }
        });
	
						
		});		 
        
    });   

		</script>
	</head>
	<body>
<script src="Scripts/chart/highcharts.js"></script>
<script src="Scripts/chart/exporting.js"></script>

<div id="container" style="left:15%; position:absolute; min-width: 300px; width:500px; height: 300px; margin: 0 auto"></div>
<table id="info" style="position:absolute;left:70%; top:50px;" width="200" border="0">
  <tr>
   
  </tr>
</table>
	</body>
</html>
